<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岗位管理</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .bigbox {
            width: 100%;
            height: 100%;
            display: flex
        }

        .bigbox .aside {
            width: 15%;
            height: 100%;
            background-color: rgb(54, 58, 65);
            color: white;
        }

        .bigbox .aside h1 {
            text-align: center;
            margin: 30px 0;
            font-size: 18;
        }

        .bigbox .aside div {
            margin-left: 30px;
            margin-bottom: 30px;
            margin-top: 30px;
        }

        .bigbox .aside ul {
            text-align: center;
            background-color: rgb(22, 36, 36);
            padding: 20px 0;
        }

        .bigbox .aside ul li {
            margin-bottom: 30px;
        }

        .bigbox .aside ul :nth-child(5) {
            color: rgb(0, 119, 255);
        }

        .bigbox .content {
            flex: 1;
        }

        .bigbox .content .top {
            height: 50px;
            display: flex;
            border: 1px solid rgb(221, 206, 206);
            line-height: 50px;
        }

        .bigbox .content .top img {
            height: 30px;
            width: 30px;
            margin-left: 10px;
            margin-top: 10px
        }

        .bigbox .content .top .left {
            margin-left: 10px;
        }

        .bigbox .content .top .user {
            margin-left: 1070px;
        }

        .bigbox .content .line-two {
            height: 50px;
            border: 1px solid rgb(221, 206, 206);
            display: flex;
            align-items: center;
        }

        .bigbox .content .line-two :nth-child(1) {
            border: 1px solid gray;
            width: 60px;
            color: gray;
            height: 30px;
        }

        .bigbox .content .line-two :nth-child(2) {
            border: 1px solid gray;
            width: 150px;
            color: white;
            height: 30px;
            background-color: rgb(0, 119, 255);
            margin-left: 5px;
            text-align: center;
        }

        .bigbox .content .line-three {
            /* align-items: center; */
            display: flex;
            height: 80px;
            line-height: 80px;
        }

        .bigbox .content .line-three :nth-child(1) {
            font-weight: 700;
            margin-left: 10px;
            margin-right: 10px;
            color: gray;
        }

        .bigbox .content .line-three :nth-child(2) {
            border: 1px solid gray;
            width: 120px;
            height: 30px;
            margin-top: 27px;
            margin-right: 30px;
        }

        .bigbox .content .line-three :nth-child(3) {
            background-color: rgb(0, 119, 255);
            text-align: center;
            line-height: 30px;
            height: 30px;
            border: 1px solid gray;
            width: 80px;
            margin-top: 27px;
            margin-right: 30px;
            color: white;
        }

        .bigbox .content .line-three :nth-child(4) {
            text-align: center;
            line-height: 30px;
            height: 30px;
            border: 1px solid gray;
            width: 80px;
            margin-top: 27px;
            margin-right: 30px;
        }

        .bigbox .content .line-four button {
            /* border: 1px solid aqua; */
            width: 60px;
            margin: 10px;
            height: 30px;
        }

        .bigbox .content .line-four :nth-child(1) {
            color: rgb(13, 111, 52);
            border: 1px solid rgb(92, 185, 185);
        }

        .bigbox .content .line-four :nth-child(2) {
            color: rgb(13, 111, 96);
            border: 1px solid rgb(57, 154, 154);
        }
        .bigbox .content .line-four :nth-child(3) {
            color: rgb(111, 47, 13);
            border: 1px solid #c65c35;
        }
        .bigbox .content .line-four :nth-child(4) {
            color: rgb(223, 185, 35);
            border: 1px solid rgb(184, 160, 21);
        }
        .bigbox .content .table {
            width: 1200px;
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .bigbox .content .table li {
            width: 100px;
            float: left;
            line-height: 40px;
            padding-left: 10px;
            text-align: center;
            font-weight: 1000;
        }
        .bigbox .content .table li:nth-child(1) {
            width: 100px;
            text-align: center;
        }
        .bigbox .content .table li:nth-child(7){
            width: 260px;
            text-align: center;
        }
        .bigbox .content .table .table-body .row {
            width: 1100px;
            border-top: 2px solid #ccc;
            overflow: hidden;
        }
        .bigbox .content .table .table-body .row li {
            float: left;
        }
        .bigbox .content .line-five{
            text-align: center;
        }
        .bigbox .content .line-five :nth-child(3){
            border: none;
            width: 25px;
            height: 25px;
            background-color: rgb(0, 119, 255);
            color: white;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="aside">
            <h1>管理系统</h1>
            <div>首页</div>
            <div>系统管理</div>
            <ul>
                <li>用户管理</li>
                <li>角色管理</li>
                <li>菜单管理</li>
                <li>部门管理</li>
                <li>岗位管理</li>
                <li>字典管理</li>
                <li>参数设置</li>
                <li>通知公告</li>
                <li>日志管理</li>
            </ul>
            <div>系统监控</div>
        </div>
        <div class="content">
            <div class="top">
                <div class="left">**</div>
                <div class="user">登录用户</div>
                <img src="img/login-background.jpg" alt="">
            </div>
            <div class="line-two">
                <div>首页</div>
                <div>岗位管理</div>
            </div>
            <div class="line-three">
                <div>岗位名称</div>
                <input type="text" placeholder="请输入岗位名称">
                <div>搜索</div>
                <div>重置</div>
            </div>
            <div class="line-four">
                <button>新增</button>
                <button>修改</button>
                <button>删除</button>
                <button>导出</button>
            </div>
            <div class="table">
                <ul class="table-head">
                    <li>□</li>
                    <li>岗位编号</li>
                    <li>岗位编码</li>
                    <li>岗位名称</li>
                    <li>岗位排序</li>
                    <li>状态</li>
                    <li>创建时间</li>
                    <li>操作</li>
                </ul>

                <div class="table-body">
                    <ul class="row">
                        <li>□</li>
                        <li>1</li>
                        <li>CEO</li>
                        <li>董事长</li>
                        <li>1</li>
                        <li>正常</li>
                        <li>2022-10-19 20:56:47</li>
                        <li>
                            <span class="amend">修改</span>
                            <span class="shanchu">删除</span>
                        </li>
                    </ul>
                    <ul class="row">
                        <li>□</li>
                        <li>2</li>
                        <li>CEO</li>
                        <li>董事长</li>
                        <li>2</li>
                        <li>正常</li>
                        <li>2022-10-19 20:56:47</li>
                        <li>
                            <span class="iconfont">修改</span>
                            <span class="iconfont">删除</span>
                        </li>
                    </ul>
                    <ul class="row">
                        <li>□</li>
                        <li>3</li>
                        <li>CEO</li>
                        <li>董事长</li>
                        <li>3</li>
                        <li>正常</li>
                        <li>2022-10-19 20:56:47</li>
                        <li>
                            <span class="iconfont">修改</span>
                            <span class="iconfont">删除</span>
                        </li>
                    </ul>
                    <ul class="row">
                        <li>□</li>
                        <li>4</li>
                        <li>CEO</li>
                        <li>董事长</li>
                        <li>4</li>
                        <li>正常</li>
                        <li>2022-10-19 20:56:47</li>
                        <li>
                            <span class="iconfont">修改</span>
                            <span class="iconfont">删除</span>
                        </li>
                    </ul>
                    <ul class="row">
                        <li>□</li>
                        <li>5</li>
                        <li>CEO</li>
                        <li>董事长</li>
                        <li>5</li>
                        <li>正常</li>
                        <li>2022-10-19 20:56:47</li>
                        <li>
                            <span class="iconfont">修改</span>
                            <span class="iconfont">删除</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="line-five">
                <span>共5条</span>
                <button class="left">&lt</button>
                <button>1</button>
                <button class="right">&gt</button>
            </div>
        </div>
    </div>
</body>

</html>
<script src="js/axios.min.js"></script>
<script src="js/index.js"></script>